const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");


module.exports = function (env, argv) {
    return {
        // context: path.resolve(__dirname, '../src'),
        // 入口
        entry: path.resolve(__dirname, '../src/index.ts'),
        // 输出
        output: {
            filename: 'js/[name].bundle.[hash].js',
            path: path.resolve(__dirname, '../dist')
        },
        // 解析
        resolve: {
            // 将 `.ts` 添加为一个可解析的扩展名。
            extensions: ['.vue', '.ts', '.js', '.scss'],
            alias: {
                'vue$': 'vue/dist/vue.esm.js',
                '@': path.join(__dirname, `../src`),
                "@component": path.join(__dirname, "../src/component"),
                "@common": path.join(__dirname, "../src/component/common"),
                "@assets": path.join(__dirname, "../src/assets"),
                "@router": path.join(__dirname, "../src/router")
            }
        },
        // 模块
        module: {
            rules: [{
                test: /\.vue$/,
                loader: 'vue-loader'
            }, {
                test: /\.ts$/,
                include: path.resolve('src'),
                use: [
                    { loader: 'cache-loader' },
                    {
                        loader: 'thread-loader',
                        options: {
                            workers: require('os').cpus().length - 1
                        }                  
                    },
                    {
                    loader: 'ts-loader',
                    options: {
                        happyPackMode: true,
                        appendTsSuffixTo: [/\.vue$/],
                        transpileOnly: true
                    }
                    }                
                ]
            }, {
                test: /\.(css|scss)$/,
                use: [{
                    loader: argv.mode !== 'production' ? 'vue-style-loader' : MiniCssExtractPlugin.loader
                }, {
                    loader: 'css-loader'
                }, {
                    loader: 'postcss-loader',
                    options: {
                        plugins: () => [require('autoprefixer')]
                    }
                }, {
                    loader: 'sass-loader'
                }, {
                    loader: 'sass-resources-loader',
                    options: {
                        resources: [
                            path.resolve(__dirname, '../src/assets/scss/global.scss').toString()
                        ]
                    }
                }]
            }, {
                test: /\.html$/i, 
                loader: 'html-loader'
            }, {
                test: /\.(png|jpe?g|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 8192
                    }
                }]
            }, {
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            use:[{
                    loader: "file-loader",
                    options: {
                        name: 'style/fonts/[name].[ext]'
                    }
            }] 
            }]
        },
        plugins: [
            new CleanWebpackPlugin(['dist', 'release'], {
                root: process.cwd(),
                verbose: true,
                dry: false
            }),
            new VueLoaderPlugin(),
            new MiniCssExtractPlugin({
                filename: 'style/[name].[hash].css',
                chunkFilename: 'style/[id].[hash].css'
            }),
            new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/),
            new HtmlWebpackPlugin({
                filename: 'index.html',
                favicon: path.resolve(__dirname, '../src/assets/favicon.ico'),
                inject: true,
                template: path.resolve(__dirname, '../index.html'),
            })            
        ],
        // 优化
        optimization: {
            minimizer: [
                new UglifyJsPlugin({
                    cache: true,
                    parallel: true,
                    sourceMap: true, // set to true if you want JS source maps
                    uglifyOptions: {
                        mangle: {
                            keep_fnames: true,
                        },
                    },
                }),
                new OptimizeCSSAssetsPlugin({})
            ],
            splitChunks: {
                cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendor",
                    chunks: "all"
                }
                }
            }
        },
        performance: {
            hints: 'warning',
            maxAssetSize: 200000,
            maxEntrypointSize: 400000,
            assetFilter: function(assetFilename) { // 过滤要检查的文件
            return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
            }        
        },
        stats: {
            // children: false,
            performance: true,
            assets: true,
            colors: true,
            errorDetails: true,
            hash: true
        },    
    }
}